<template>
	<!-- 卡片视图区 -->
	<el-card>
		<el-row :gutter="25">
			<el-col :span="7">
				<!-- 搜索添加 -->
				<el-input  placeholder="请输入搜索家族成员的名字" v-model.lazy="queryInfo.searchName"></el-input>
			</el-col>
			<el-col :span="6">
			<el-button type="primary" @change="getSupplierList">查询</el-button>
				<el-button type="primary" @click="dialogAddVisible = true">添加家族成员</el-button>
			</el-col>
		</el-row>
		<!-- 列表 -->
		<el-table :data="supplierList" element-loading-background="rgba(255, 255, 255, .5)"
		element-loading-spinner="el-icon-loading">

<!-- <el-table-column label="记录号" type="index" fixed="left"></el-table-column> -->
<el-table-column label="家族成员编号" prop="id"></el-table-column>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="性别" prop="sex"></el-table-column>
<el-table-column label="出生日期" prop="birth"></el-table-column>
<el-table-column label="死亡时间" prop="die"></el-table-column>
<el-table-column label="配偶" prop="mate"></el-table-column>
<el-table-column label="荣誉" prop="honor"></el-table-column>
<el-table-column label="孩子" prop="child"></el-table-column>
<el-table-column label="父亲" prop="father"></el-table-column>
<el-table-column label="母亲" prop="mother"></el-table-column>
			<el-table-column label="操作" width="150">
				<template #default="scope">
					<!-- 修改 -->
					<div class="item">
					<el-button type="primary" icon="el-icon-edit" size="small"
						@click="dialogEditOpen(scope.row.id, scope.row.name,  scope.row.birth, scope.row.die, scope.row.mate, scope.row.SupplierEmail, scope.row.honor, scope.row.child, scope.row.father)">
					编辑</el-button>
					<!-- 删除 -->
					<el-button type="danger" icon="el-icon-delete" size="small"
						@click="deleteSupplier(scope.row.id)">删除</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryInfo.page" :page-sizes="[1, 2, 10, 100]" :page-size="queryInfo.limit"
			layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
	</el-card>

	<el-dialog title="添加家族成员" v-model="dialogAddVisible" width="50%">
		<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
			<el-form-item label="姓名" prop="name">
				<el-input v-model="addForm.name"></el-input>
			</el-form-item>
			<el-form-item label="性别" prop="sex">
				<el-input v-model="addForm.sex"></el-input>
			</el-form-item>
			<el-form-item label="出生日期" prop="birth">
				<el-input v-model="addForm.birth"></el-input>
			</el-form-item>
			<el-form-item label="死亡日期" prop="die">
				<el-input v-model="addForm.die"></el-input>
			</el-form-item>
			<el-form-item label="配偶" prop="mate">
				<el-input v-model="addForm.supplierCtelephone"></el-input>
			</el-form-item>
			<el-form-item label="荣誉" prop="honor">
				<el-input v-model="addForm.honor"></el-input>
			</el-form-item>
			<el-form-item label="孩子" prop="child">
				<el-input v-model="addForm.child"></el-input>
			</el-form-item>
			<el-form-item label="父亲" prop="father">
				<el-input v-model="addForm.father"></el-input>
			</el-form-item>
			<el-form-item label="母亲" prop="mother">
				<el-input v-model="addForm.father"></el-input>
			</el-form-item>
		</el-form>
		<span  style="margin-left: 38%;">
			<el-button type="primary" @click="addSupplier">确 定</el-button>
			<el-button @click="dialogAddVisible = false">取 消</el-button>
		</span>
	</el-dialog>

	<!-- 编辑对话框 -->
	<el-dialog title="编辑家族成员" v-model="dialogEditVisible" width="50%">
		<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px">
			<el-form-item label="家族成员编号" prop="id">
				<el-input v-model="editForm.id" :disabled="true"></el-input>
			</el-form-item>
			<el-form-item label="姓名" prop="name">
				<el-input v-model="editForm.name"></el-input>
			</el-form-item>
			<el-form-item label="性别" prop="sex">
				<el-input v-model="editForm.name"></el-input>
			</el-form-item>
			<el-form-item label="出生日期" prop="birth">
				<el-input v-model="editForm.birth"></el-input>
			</el-form-item>
			<el-form-item label="死亡日期" prop="die">
				<el-input v-model="editForm.die"></el-input>
			</el-form-item>
			<el-form-item label="配偶" prop="mate">
				<el-input v-model="editForm.supplierCtelephone"></el-input>
			</el-form-item>
			<el-form-item label="荣誉" prop="father">
				<el-input v-model="editForm.father"></el-input>
			</el-form-item>
			<el-form-item label="孩子" prop="child">
				<el-input v-model="editForm.child"></el-input>
			</el-form-item>
			<el-form-item label="父亲" prop="father">
				<el-input v-model="editForm.father"></el-input>
			</el-form-item>
			<el-form-item label="母亲" prop="mother">
				<el-input v-model="editForm.mother"></el-input>
			</el-form-item>
		</el-form>
		<span  style="margin-left: 38%;">
			<el-button type="primary" @click="updateSupplier">确 定</el-button>
			<el-button @click="dialogEditVisible = false">取 消</el-button>
		</span>
	</el-dialog>
</template>

<script>
	export default {

		data() {
			return{
				isLoading:false,
				dialogAddVisible: false,
				dialogEditVisible: false,
				queryInfo: {
					searchname: '',
					page: 1,
					limit: 10
				},
				supplierList: [
					{
						id:'14',
						name: '蒋介石',
						sex:'男',
						birth: '1944-1-18',
						die: '1978-1-18',
						mate: '很多',
						honor: '很多',
						child: '很多',
						father: '父亲',
						mother: '母亲',
					}
				], // 供应商列表
				total: 0, // 最大数据记录
				addForm: {
					name: '',
					sex:'',
					birth: '',
					die: '',
					mate: '',
					honor: '',
					child: '',
					father: '',
					mother: '',
				},
				editForm: {
					name: '',
					sex:'',
					birth: '',
					die: '',
					mate: '',
					honor: '',
					child: '',
					father: '',
					mother: '',
				},
				addFormRules: {
					name: [{
						required: true,
						message: "请输入家族成员姓名",
						trigger: "blur"
					}],
					birth: [{
						required: true,
						message: "请输入家族成员出生日期",
						trigger: "blur"
					}],
					die: [{
						required: true,
						message: "请输入家族成员死亡日期",
						trigger: "blur"
					}],
					mate: [{
						required: true,
						message: "请输入家族成员配偶姓名",
						trigger: "blur"
					}],
					honor: [{
						required: true,
						message: "请输入家族成员荣誉",
						trigger: "blur"
					}],
					child: [{
						required: true,
						message: "请输入家族成员孩子",
						trigger: "blur"
					}],
					father: [{
						required: true,
						message: "请输入家族成员父亲",
						trigger: "blur"
					}],
					mother: [{
						required: true,
						message: "请输入家族成员母亲",
						trigger: "blur"
					}],
					// supplierEmail: [{
					// 	required: true,
					// 	trigger: "blur",
					// 	validator: checkEmail,
					// }],

				},
				editFormRules: {
					name: [{
						required: true,
						message: "请输入家族成员姓名",
						trigger: "blur"
					}],
					birth: [{
						required: true,
						message: "请输入家族出生日期",
						trigger: "blur"
					}],
					die: [{
						required: true,
						message: "请输入家族成员死亡日期",
						trigger: "blur"
					}],
					mate: [{
						required: true,
						message: "请输入家族成员配偶姓名",
						trigger: "blur"
					}],
					honor: [{
						required: true,
						message: "请输入家族成员荣誉",
						trigger: "blur"
					}],
					child: [{
						required: true,
						message: "请输入家族成员孩子",
						trigger: "blur"
					}],
					father: [{
						required: true,
						message: "请输入家族成员父亲",
						trigger: "blur"
					}],
					mother: [{
						required: true,
						message: "请输入家族成员母亲",
						trigger: "blur"
					}],
					// honor: [{
					// 	required: true,
					// 	trigger: "blur",
					// 	validator: checkEmail,
					// }],
				},
			}
		},
		created() {
			this.getSupplierList();
		},
		methods: {
			async getSupplierList() {
				this.isLoading = true;
				// 调用post请求
				const {
					data: res
				} = await this.$http.get("system/apis/supplier", {
					params: this.queryInfo
				});
				if (res.code != 20000) {
					this.$message.error("加载供应商列表失败");
					this.isLoading = false;
				}
				this.supplierList = res.data.value; // 将返回数据赋值
				this.total = res.data.total; // 总个数
				this.isLoading = false;
			},
			// 监听pageSize改变的事件
			handleSizeChange(newLimit) {
				this.queryInfo.limit = newLimit;
				this.getSupplierList(); // 数据发生改变重新申请数据
			},
			// 监听pageNum改变的事件
			handleCurrentChange(newPage) {
				this.queryInfo.page = newPage;
				this.getSupplierList(); // 数据发生改变重新申请数据
			},
			async deleteSupplier(id) {
				// 弹框
				const confirmResult = await this.$confirm('此操作将永久删除该供应商, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err => err)
				// 成功删除为confirm 取消为 cancel
				if (confirmResult != 'confirm') {
					return this.$message.info("已取消删除");
				}
				const {
					data: res
				} = await this.$http.delete("system/apis/supplier?id=" + id);
				if (res.code != 20000) {
					return this.$message.error("删除失败");
				}
				this.$message.success("删除成功");
				this.getSupplierList();
			},
			// 添加员工
			addSupplier() {
				this.$refs.addFormRef.validate(async valid => {
					if (!valid) return;
					// 发起请求
					const {
						data: res
					} = await this.$http.post("/system/apis/supplier", this.addForm);
					if (res.code == 20000) {
						this.getSupplierList();
						this.dialogAddVisible = false;
						return this.$message.success("添加成功");
					}
					this.$message.error("添加失败");
				})
			},
			// 编辑供应商
			updateSupplier() {
				this.$refs.editFormRef.validate(async valid => {
					if (!valid) return;
					// 发起请求
					const {
						data: res
					} = await this.$http.put("/system/apis/supplier", this.editForm);
					if (res.code == 20000) {
						this.getSupplierList();
						this.dialogEditVisible = false;
						return this.$message.success("编辑成功");
					}
					this.$message.error("编辑失败");
				})
			},
			dialogEditOpen(id, name,  birth, die, mate, honor, child, father,mother ) {
				// this.editForm.id = String(id);
				this.editForm.name = String(name);
				this.editForm.birth = String(birth);
				this.editForm.die = String(die);
				this.editForm.mate = String(mate);
				this.editForm.honor = String(honor);
				this.editForm.child = String(child);
				this.editForm.father = String(father);
				this.editForm.mother = String(mother);
				this.dialogEditVisible = true;
			},
		},
	}
</script>

<style lang="scss" scoped>
.item{
    display: flex;
}
</style>